<template>
<view class="content">
  <view class="tab">
    <view class="tab-item" v-for="item in tabList" @click="click(item.click)">
      <view class="iconfont " :class="item.iconNmae"></view>
      <view>{{item.name}}</view>
    </view>
  </view>
  <Empty></Empty>
</view>
</template>

<script>
import Empty from "@/components/Empty";

export default {
name: "Relevant",
  components:{
    Empty,
  },
  data(){
  return{
    tabList:[{
      name:'评论',
      iconNmae:'icon-xiaoxi2',
      click:'toComment',
    },
      {
        name:'粉丝',
        iconNmae:'icon-fensi',
        click:'toFans',
      },
      {
        name:'点赞',
        iconNmae:'icon-dianzan_huaban1_huaban1',
        click:'toLike',
      },]
  }
  },
  methods:{
    click(e){
      this[e]();
    },
    toComment(){
      uni.navigateTo({
        url:'Comment'
      })
    },
    toFans(){
      uni.navigateTo({
        url:'MyFans'
      })
    },
    toLike(){
      uni.navigateTo({
        url:'Comment'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  background-color: #F1F1F1;
  position: relative;
  .tab{
    width: 100%;
    height: 200rpx;
    margin-top: 10rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    :nth-child(1){
      :first-child{
        background-color: #FF0F26;
      }
    }
    :nth-child(2){
      :first-child{
        background-color: #FF891B;
      }
    }
    :nth-child(3){
      :first-child{
        background-color: #A84BFE;
      }
    }
    .tab-item{
      width: 120rpx;
      height: 170rpx;
      //background-color: #2ecc71;
      text-align:center;
      line-height:120rpx;
      :nth-child(1){
        width: 100%;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
      }
      :nth-child(2){
        font-size: 30rpx;
        font-family: "Yuanti SC";
        line-height:50rpx;
      }
    }
  }
}
</style>
